<template>
	<view class="label">
		<view class="label-box">
			<view class="label-header">
				<view class="label-header-title">
					我的标签
				</view>
				<view class="label-header-edit" @click="edit">
					{{isEdit?'完成':'编辑'}}
				</view>
			</view>
			<uni-load-more v-if="loading" status="loading" iconType="snow"></uni-load-more>
			<view class="label-content" v-if="!loading">
				<view class="label-content-item" v-for="(item,index) in myLabelList" :key="index">
					{{item.name}}
					<uni-icons @click="del(index)" v-if="isEdit" type="clear" size="18" color="$uni-border-color" class="icon-close"></uni-icons>
				</view>
			</view>
			<view v-if="myLabelList.length === 0 && !loading" class="no-data">
				当前没有数据
			</view>
		</view>
		<view class="label-box">
			<view class="label-header">
				<view class="label-header-title">
					标签推荐
				</view>
			</view>
			<view class="label-content" v-if="!loading">
				<view @click="add(index)" class="label-content-item" v-for="(item,index) in list" :key="index">
					{{item.name}}
				</view>
			</view>
			<view v-if="list.length === 0 && !loading" class="no-data">
				当前没有数据
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isEdit: false,
				myLabelList:[],
				list:[],
				loading:true
			}
		},
		onLoad() {
			this.getLabel()
		},
		methods: {
			edit(){
				if(this.isEdit){
					this.isEdit = false
					this.updateUserLabel()
				} else{
					this.isEdit = true
				}
			},
			getLabel(){
				this.loading=true
				this.$api.getLabel({type:'all'}).then(res=>{
					this.loading=false
					const {data} = res
					this.myLabelList = data.filter(i=>i.current)
					this.list = data.filter(i=>!i.current)
				}).catch(err=>{
					this.loading=false
				})
			},
			add(index){
				if(!this.isEdit) return
				this.myLabelList.unshift(this.list[index])
				this.list.splice(index,1)
			},
			del(index){
				if(!this.isEdit) return
				this.list.unshift(this.myLabelList[index])
				this.myLabelList.splice(index,1)
			},
			updateUserLabel(){
				let labelIds = []
				this.myLabelList.forEach(e=>{
					labelIds.push(e._id)
				})
				uni.showLoading()
				this.$api.updateUserLabel({
					labelList:labelIds
				}).then(res=>{
					uni.hideLoading()
					uni.showToast({
						title:'更新成功'
					})
					uni.$emit('updateLabel')
				}).catch(err=>{
					uni.hideLoading()
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	page{
		background-color: #F5f5f5;
	}
	.label{
		.label-box{
			background-color: #fff;
			margin-bottom: 10px;
			.label-header{
				display: flex;
				justify-content: space-between;
				font-size: 14px;
				color: #666;
				padding: 10px 15px;
				border-bottom: 1px solid #f5f5f5;
				.label-header-edit{
					color: #30b33a;
					font-weight: bold;
				}
			}
			.label-content{
				display: flex;
				flex-wrap: wrap;
				padding: 15px;
				padding-top: 0;
				.label-content-item{
					position: relative;
					padding: 2px 5px;
					margin-top: 12px;
					margin-right: 10px;
					border-radius: 5px;
					border: 1px #666 solid;
					font-size: 14px;
					color: #666;
					.icon-close{
						position: absolute;
						top: -8px;
						right: -8px;
						background-color: #fff;
						border-radius: 50%;
					}
				}
			}
		}
	}
	.no-data{
		width: 100%;
		text-align: center;
		padding: 50rpx 0;
		font-size: 14px;
		color: #999;
	}

</style>
